
<template>
  <el-container class="admin-layout" direction="vertical">
    <!-- 顶部栏 -->
    <el-header class="header" height="64px">
      <!-- 汉堡菜单（仅小屏显示） -->
      <el-button
        type="text"
        icon="el-icon-s-fold"
        class="mobile-menu-btn"
        @click="drawer = !drawer"
      ></el-button>
      <!-- 中间标题 -->
      <div class="header-title">
        <img
          src="@/assets/logo.png"
          alt="logo"
          height="40"
          class="logo"
        />
        <span class="title-text">询标系统管理后台</span>
      </div>
      <!-- 右侧时间 -->
      <div class="header-time">
        <span>{{ currentTime }}</span>
      </div>
    </el-header>
    
    <!-- 主体容器 -->
    <el-container class="body-container">
      <!-- 侧边栏 -->
      <el-aside
        :width="drawer ? '220px' : '0px'"
        class="sidebar"
        :class="{ 'sidebar-hidden': !drawer }"
      >
        <!-- 侧栏顶部用户区块 -->
        <div class="sidebar-user">
          <div class="user-info">
            <i class="el-icon-user-solid"></i>
            <span v-if="!rail">欢迎管理员</span>
          </div>
          <el-button type="text" icon="el-icon-switch-button" @click="handleLogout" class="logout-btn"></el-button>
        </div>

        <el-menu
          class="sidebar-menu"
          :collapse="rail"
          background-color="#409EFF"
          text-color="#fff"
          active-text-color="#ffd04b"
        >
          <el-menu-item index="dashboard" @click="$router.push('/admin/dashboard')">
            <i class="el-icon-data-analysis"></i>
            <span slot="title">统计报表</span>
          </el-menu-item>
          
          <el-menu-item index="inquiries" @click="$router.push('/admin/inquiries')">
            <i class="el-icon-document"></i>
            <span slot="title">询标记录</span>
          </el-menu-item>
          
          <el-menu-item index="paramconfig" @click="$router.push('/admin/paramconfig')">
            <i class="el-icon-setting"></i>
            <span slot="title">参数配置</span>
          </el-menu-item>
          
          <el-menu-item index="permissions" @click="$router.push('/admin/permissions')">
            <i class="el-icon-user"></i>
            <span slot="title">权限管理</span>
          </el-menu-item>
          
          <el-menu-item index="messagestemplate" @click="$router.push('/admin/messagestemplate')">
            <i class="el-icon-message"></i>
            <span slot="title">短信配置</span>
          </el-menu-item>
          
          <!-- 日志记录菜单 -->
          <el-submenu index="logs">
            <template slot="title">
              <i class="el-icon-document-copy"></i>
              <span>日志记录</span>
            </template>
            <el-menu-item index="logs-operation" @click="$router.push('/admin/logs/operation')">
              <i class="el-icon-time"></i>
              <span slot="title">操作日志</span>
            </el-menu-item>
            <el-menu-item index="logs-login" @click="$router.push('/admin/logs/login')">
              <i class="el-icon-key"></i>
              <span slot="title">登录日志</span>
            </el-menu-item>
            <el-menu-item index="logs-system" @click="$router.push('/admin/logs/system')">
              <i class="el-icon-monitor"></i>
              <span slot="title">访问日志</span>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      
      <!-- 主要内容区 -->
      <el-main class="main-content">
        <div class="content-wrapper">
          <router-view></router-view>
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
// AdminLayout.vue 的导出对象（Vue2 Options API）
import router from '@/router'

export default {
  name: 'AdminLayout',
  data() {
    return {
      drawer: true,
      rail: false,
      currentTime: '',
      timer: null
    }
  },
  methods: {
    formatTime() {
      const now = new Date()
      const year = now.getFullYear()
      const month = String(now.getMonth() + 1).padStart(2, '0')
      const day = String(now.getDate()).padStart(2, '0')
      const hours = String(now.getHours()).padStart(2, '0')
      const minutes = String(now.getMinutes()).padStart(2, '0')
      const seconds = String(now.getSeconds()).padStart(2, '0')
      return `${year}年${month}月${day}日 ${hours}:${minutes}:${seconds}`
    },
    updateTime() {
      this.currentTime = this.formatTime()
    },
    handleResize() {
      if (window.innerWidth < 960) {
        this.drawer = false
        this.rail = false
      } else {
        this.drawer = true
      }
    },
    async handleLogout() {
      try {
        // 清除本地存储的认证信息
        localStorage.removeItem('token')
        sessionStorage.removeItem('token')
        localStorage.removeItem('userRole')
        localStorage.removeItem('userInfo')
      } catch (e) {
        console.warn('清除本地存储失败:', e)
      }
      // 跳转到登录页
      this.$router.push('/login')
    }
  },
  mounted() {
    this.handleResize()
    window.addEventListener('resize', this.handleResize)
    this.updateTime()
    this.timer = setInterval(this.updateTime, 1000)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize)
    if (this.timer) {
      clearInterval(this.timer)
      this.timer = null
    }
  }
}
</script>

<style scoped>
.admin-layout {
  height: 100vh;
}

.body-container {
  flex: 1;
  height: calc(100vh - 64px);
}

.header {
  background-color: #409EFF;
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.mobile-menu-btn {
  color: white;
  display: none;
}

.header-title {
  display: flex;
  align-items: center;
  flex: 1;
  justify-content: center;
}

.logo {
  margin-right: 8px;
  vertical-align: middle;
}

.title-text {
  font-size: 18px;
  font-weight: bold;
}

.header-time {
  font-size: 14px;
}

.sidebar {
  background-color: #409EFF;
  transition: width 0.3s;
  overflow: hidden;
}

.sidebar-hidden {
  width: 0 !important;
}

.sidebar-user {
  height: 64px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: white;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.user-info {
  display: flex;
  align-items: center;
}

.user-info i {
  margin-right: 8px;
  font-size: 18px;
}

.logout-btn {
  color: white;
}

.sidebar-menu {
  border: none;
}

.main-content {
  background-color: #f4f7f9;
  overflow-y: auto;
}

.content-wrapper {
  padding: 24px;
}

/* 移动端样式 */
@media (max-width: 768px) {
  .mobile-menu-btn {
    display: inline-block;
  }
  
  .header-time {
    display: none;
  }
  
  .sidebar {
    position: fixed;
    top: 64px;
    left: 0;
    height: calc(100vh - 64px);
    z-index: 1000;
    width: 220px !important;
  }
  
  .sidebar-hidden {
    width: 0 !important;
    transform: translateX(-100%);
  }
  
  .sidebar-user {
    height: 56px;
  }
  
  .main-content {
    margin-left: 0;
    width: 100%;
  }
}
</style>

